<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="utf-8">
	<title>6.21hw</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		ul,
		li {
			list-style: none;
		}
	</style>
</head>

<body>
	<div id="app">
		<ul>
			<li v-for="(n,index) in number"><input @click.stop="OneCheck($event)" type="checkbox" name="mycheck" :value="n">{{n}}</li>
			<li>
				<input @click.stop="AllCheck($event)" type="checkbox" name="All">全选
				<button @click.stop="MytoUpperCase" id="big">选中大写</button>
				<button @click.stop="MytoLowerCase" id="small">选中小写</button>
			</li>
		</ul>
	</div>
	<script src="./js/vue.js"></script>
	<script>
		let app = new Vue({
			el: "#app",
			data: {
				number: ["one", "two", "three", "four", "five"],
				mycheck: document.getElementsByName("mycheck"),
				MyAll: document.getElementsByName("All")
			},
			methods: {
				//全选按钮
				AllCheck: function (e) {
					//获取当前元素
					let all = e.currentTarget;
					//记录全选按钮当前状态
					let boolean = all.checked
					//将所有按钮全部设定为全选按钮当前状态
					for (let i in this.mycheck) {
						this.mycheck[i].checked = boolean
					}
				},
				//单个按钮
				OneCheck: function (e) {
					//获取当前按钮
					let now = e.currentTarget;
					//循环mycheck
					for (let i in this.mycheck) {
						//如果有一个为false
						//将全选按钮取消选中
						if (this.mycheck[i].checked == false) {
							this.MyAll[0].checked = false
							console.log(this.mycheck[i].checked)
							break;
							//如果循环到最后一个都没有false
							//将全选按钮勾选
						} else if (i == this.mycheck.length - 1) {
							console.log(this.mycheck[i].checked)
							this.MyAll[0].checked = true
							break
						}
					}
				},
				//选中全部大写
				MytoUpperCase:function(){
					for(let i in this.mycheck){
						if(this.mycheck[i].checked == true){
							let str = this.number[i].toUpperCase()
							//修改数组里面的值无法触发vue的响应事件只能手动响应
							Vue.set(this.number,i,str)
						}
					}
				},
				//选中全部小写
				MytoLowerCase:function(){
					for(let i in this.mycheck){
						if(this.mycheck[i].checked == true){
							let str = this.number[i].toLowerCase()
							//修改数组里面的值无法触发vue的响应事件只能手动响应
							Vue.set(this.number,i,str)
						}
					}
				}
			}
		})
	</script>
</body>

</html>